import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import {
  a11yDark,
  cb,
  darcula,
  dark,
  dracula,
  duotoneForest,
  duotoneEarth,
  duotoneLight,
  duotoneSea,
  duotoneSpace,
  funky,
  materialDark,
  materialLight,
  materialOceanic,
  nord,
  okaidia,
  vscDarkPlus,
  coy,
  atomDark,
  ghcolors,
  hopscotch,
  tomorrow,
  xonokai,
  duotoneDark,
  base16AteliersulphurpoolLight,
} from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';
import Card from '../Card/index';
import './index.less';
import { Select } from 'antd';
class ReactMarkdownProps {
  code? = '' as any;
  style? = 'vscDarkPlus' as any;
  showStyle? = true as boolean;
}

const SongMarkdown: React.FC<ReactMarkdownProps> = ({
  code,
  style: styleF,
  showStyle,
}) => {
  const [style, setStyle] = useState(styleF);
  const selectData = [
    { name: 'vscDarkPlus', style: vscDarkPlus },
    { name: 'coy', style: coy },
    { name: 'a11yDark', style: a11yDark },
    { name: 'atomDark', style: atomDark },
    { name: 'cb', style: cb },
    { name: 'ghcolors', style: ghcolors },
    { name: 'hopscotch', style: hopscotch },
    { name: 'tomorrow', style: tomorrow },
    { name: 'xonokai', style: xonokai },
    { name: 'duotoneDark', style: duotoneDark },
    {
      name: 'base16AteliersulphurpoolLight',
      style: base16AteliersulphurpoolLight,
    },
    { name: 'darcula', style: darcula },
    { name: 'dark', style: dark },
    { name: 'dracula', style: dracula },
    { name: 'duotoneForest', style: duotoneForest },
    { name: 'duotoneLight', style: duotoneLight },
    { name: 'duotoneSea', style: duotoneSea },
    { name: 'duotoneSpace', style: duotoneSpace },
    { name: 'funky', style: funky },
    { name: 'materialDark', style: materialDark },
    { name: 'materialLight', style: materialLight },
    { name: 'materialOceanic', style: materialOceanic },
    { name: 'nord', style: nord },
    { name: 'okaidia', style: okaidia },
    { name: 'duotoneEarth', style: duotoneEarth },
  ];
  return (
    <Card style={{ margin: '10px' }} className="songs-markdown-style">
      <ReactMarkdown
        className="markdown-body"
        children={code}
        remarkPlugins={[remarkMath]}
        rehypePlugins={[rehypeKatex]}
        components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '');
            return match ? (
              <>
                {showStyle && (
                  <Select
                    style={{ width: '150px' }}
                    defaultValue={style}
                    onChange={(value) => {
                      setStyle(value);
                    }}
                  >
                    {selectData?.map((item) => (
                      <Select.Option key={item.name} value={item.name}>
                        {item.name}
                      </Select.Option>
                    ))}
                  </Select>
                )}
                <SyntaxHighlighter
                  showLineNumbers={true}
                  startingLineNumber={1}
                  language={match[1]}
                  style={
                    selectData?.filter((item) => item?.name === style)?.[0]
                      ?.style
                  }
                  lineNumberStyle={{ color: '#ddd', fontSize: 16 }}
                  wrapLines={false}
                >
                  {String(children).replace(/\n$/, '')}
                </SyntaxHighlighter>
              </>
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            );
          },
        }}
      ></ReactMarkdown>
    </Card>
  );
};

export default SongMarkdown;
